<template>
  <div class="wrap" id="wrap">
  <v-scale-screen width="1920" height="1080" :autoScale="{x:true,y:true}"
  :full-screen="true"
  >

    <BorderBox11 title="全国整体业务监控" style="width:1920px;height: 1080px;" >
        <div class="angry-grid">
          <div id="item-0">
                <diCharts></diCharts>
          </div>
          <div id="item-1">
             <dv-border-box-1>
               <lineChart />
              </dv-border-box-1>
          </div>
          <div id="item-2">
            <dv-border-box-8>

                 <proChart />
              </dv-border-box-8>
          </div>
          <div id="item-3">
            <pro-com></pro-com>
          </div>
          <div id="item-4">
            <barChart></barChart>
          </div>
          <div id="item-5">
            <dataVpro />
          </div>
          <div id="item-6">
              <h1 style="color:white;">患者满意度调查</h1>
            <div class="mycon">
            
                <div class="mytips">
                  <div>
                   <dv-border-box-10 style="height:70px">
                      <dv-digital-flop :config="config1" style="width:200px;height:70px; margin-bottom: 10px;" />
                          <div>本月满意度分</div>
                      </dv-border-box-10>
                    </div>
                      <div>
                    <dv-border-box-10 style="height:70px">
                       <dv-digital-flop :config="config2"  style="width:200px;height:70px; margin-bottom: 10px;" />
                        <div>上月满意度分</div>
                    </dv-border-box-10>
                      </div>
                </div>
               <lei-charts></lei-charts>
            </div>
          </div>
          <div id="item-7">&nbsp;</div>
          <div id="item-8">&nbsp;</div>
        </div>
    </BorderBox11>
   </v-scale-screen>
  </div>
</template>

<script setup>
import {onMounted,ref} from 'vue'
import {BorderBox11} from '@kjgl77/datav-vue3'
import VScaleScreen from 'v-scale-screen'
import lineChart from './charts/lineCharts.vue'
import barChart from './charts/barCharts.vue'
import proChart from './charts/progressCharts.vue'
import proCom from './charts/proCom.vue'
import dataVpro from './charts/dataVpro.vue'
import leiCharts from './charts/leiCharts.vue'
// import autofit from 'autofit.js'
import axios from 'axios'
import diCharts from './charts/diCharts.vue'

const config1 = ref({
  number: [80],
  content: '{nt}分'
})

const config2 = ref({
  number: [90],
  content: '{nt}分'
})
onMounted(()=>{
    // autofit.init({
    //     dh: 1080,
    //     dw: 1920,
    //     el: "#app",
    //     resize: true
    //   },
    //     false
    //   )

})
</script>
<style lang="less" scoped>
*{
  margin:0;
  padding:0;
  line-height: 1;
}
  .wrap{
 
      height: 1080px;
     background: rgb(3,40,101);
    // background:url(../../assets/sbg.png);
  }
    .angry-grid {
  //  background:url(../../assets/sbg.png);
      //  background: rgb(3,40,101);
      height: 1080px;
      display: grid; 

      padding:50px 20px 20px 20px;
      box-sizing: border-box;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      
      gap: 0px;
      // height: 100%;
      
    }
      
    #item-0 {

      // background-color: #7EDDAF; 
      grid-row-start: 1;
      grid-column-start: 2;

      grid-row-end: 5;
      grid-column-end: 4;
      
    }
    #item-1 {

      // background-color: #D756CD; 
      grid-row-start: 1;
      grid-column-start: 1;

      grid-row-end: 2;
      grid-column-end: 2;
      
    }
    #item-2 {

      // background-color: #DEA579; 
      grid-row-start: 1;
      grid-column-start: 4;

      grid-row-end: 2;
      grid-column-end: 5;
      
    }
    #item-3 {

      // background-color: #D5D97B; 
      grid-row-start: 2;
      grid-column-start: 4;

      grid-row-end: 3;
      grid-column-end: 5;
      
    }
    #item-4 {

   
      grid-row-start: 2;
      grid-column-start: 1;

      grid-row-end: 3;
      grid-column-end: 2;
      
    }
    #item-5 {

      // background-color: #BBD58C; 
      grid-row-start: 3;
      grid-column-start: 1;

      grid-row-end: 4;
      grid-column-end: 2;
      
    }
    #item-6 {

      // background-color: #E99875; 
      grid-row-start: 3;
      grid-column-start: 4;

      grid-row-end: 4;
      grid-column-end: 5;
      
    }
    #item-7 {

      background-color: #B9C7EF; 
      grid-row-start: 4;
      grid-column-start: 4;

      grid-row-end: 5;
      grid-column-end: 5;
      
    }
    #item-8 {

      background-color: #ADDAD5; 
      grid-row-start: 4;
      grid-column-start: 1;

      grid-row-end: 5;
      grid-column-end: 2;
      
    }
    .mycon{
      display: flex;
    }
    .mytips{
      >div{
        width: 170px;
        margin-right: 40px;
        margin-left: 20px;
        margin-top: 20px;
        text-align: center;
        height: 110px;
      }
      color:white;
    //  display: flex;
    }
</style>
